import React, { Component } from 'react'
import { Switch, Route, NavLink } from 'react-router-dom'
import LayoutSon1 from './LayoutSon1'
import LayoutSon2 from './LayoutSon2'
import LayoutSon3 from './LayoutSon3'

export default class Layout extends Component {
  render() {
    return (
      <div>
          {/* 嵌套路由--一个大的页面中有固定组件也有会切换的组件，这个组件就是Layout */}
          <div>我假装是一个组件----top</div>
          {/* 子路由要放在父组件中--就是将路由中的嵌套路由的子路由部分代码放在这个文件 */}
        <Switch>
            <Route path="/layout/son1" component={LayoutSon1}></Route>
            <Route path="/layout/son2" component={LayoutSon2}></Route>
            <Route path="/layout/son3" component={LayoutSon3}></Route>
        </Switch>
        <NavLink to="/layout/son1">son1</NavLink>
        <NavLink to="/layout/son2">son2</NavLink>
        <NavLink to="/layout/son3">son3</NavLink>
      </div>
    )
  }
}
